<template>
  <el-card class="order-container">
    <template #header>
      <div class="header">
        <div class="search">
          <el-input
            style="width: 200px; margin-right: 10px"
            placeholder="搜索店铺名称"
            v-model="params.shopname"
            @change="getList"
            clearable
          />
          <el-input
            style="width: 200px; margin-right: 10px"
            placeholder="搜索店铺地址"
            v-model="params.address"
            @change="getList"
            clearable
          />
          <el-input
            style="width: 200px; margin-right: 10px"
            placeholder="搜索手机号"
            v-model="params.phone"
            @change="getList"
            clearable
          />
        </div>
        <el-button-group>
          <el-button type="success" @click="deleted(0)">恢复门店</el-button>
          <el-button type="danger" @click="deleted(0)">关闭门店</el-button>
        </el-button-group>
      </div>
    </template>

    <!-- table data list-->
    <el-table class="table-row-optimize" v-loading="state.loading"
      :data="state.tableData"
      tooltip-effect="dark"
      @selection-change="selectionChangeIds">
      <el-table-column type="selection" width="45"/>
      <el-table-column width="100" align="center">
        <template #default="scope">
          <img width="60" height="60"
            :src="scope.row.shoplogo"
            :alt="scope.row.shopname"
            style="border: 1px solid rgba(0,0,0,0.05); border-radius: 5px;">
        </template>
      </el-table-column>
      <el-table-column label="店铺信息">
        <template #default="scope">
          <span style="display: block">{{ scope.row.shopname }}</span>
          <span style="color: #bbb;">{{ scope.row.address }}</span>
        </template>
      </el-table-column>
      <el-table-column label="审核状态" width="80" align="center">
        <template #default="scope">
          <el-tag type="success" v-if="scope.row.status === 2">已通过</el-tag>
          <el-button-group v-if="scope.row.status === 1">
            <el-button type="success"
              @click="verify(scope.row.id, 2)">通过
            </el-button>
            <el-button type="warning"
              @click="verify(scope.row.id, 0)">驳回
            </el-button>
          </el-button-group>
        </template>
      </el-table-column>
      <el-table-column label="联系方式" width="180" align="center">
        <template #default="scope">
          <span style="display: block">{{ scope.row.phone }}</span>
          <span style="color: #bbb;">Tel：{{ scope.row.tel }}</span>
        </template>
      </el-table-column>
      <el-table-column label="营业时间" align="center" width="120">
        <template #default="scope">
          {{ scope.row.business_hours }}
        </template>
      </el-table-column>
      <el-table-column label="营业执照" align="center">
        <template #default="scope">
          <img width="100" height="60" alt="营业执照"
            :src="scope.row.business_license"
            :style="{
             borderRadius: '3px'
           }">
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" width="100">
        <template #default="scope">
          <el-button text type="danger" v-if="scope.row.deleted_at">已关闭</el-button>
          <el-button text type="success" v-else>营业中</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" align="center" width="120">
        <template #default="scope">
          {{ toDateTime(scope.row.created_at) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120" align="center">
        <template #default="scope">
          <el-button type="primary" @click="dialog(scope.row.id)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--总数超过一页，再展示分页器-->
    <el-pagination background
      layout="prev, pager, next, total"
      :total="state.total"
      :page-size="params.limit"
      :current-page="params.page"
      @current-change="changePage"
    />
  </el-card>

  <dialog-shop ref="refshop" :reload="getList"/>

</template>

<script setup>
import { toDateTime } from "../utils";
import { onMounted, reactive } from "vue";
import { AdminShopDel, AdminShopList, AdminShopPostOnlyStatus } from "../api/server/shop";
import DialogShop from "../components/DialogShop.vue"
import crud from '../utils/crud'

const refshop = ref(null)
const state = reactive({
  loading: true,
  selectedIds: [],
  tableData: null,
  total: 0,
})
const params = reactive({
  shopname: '',
  address: '',
  phone: '',
  page: 1,
  limit: 10
})

onMounted(() => {
  getList()
})

const getList = async (page) => {
  page && (params.page = page)
  state.loading = true
  const { data, current_page, total } = await AdminShopList(params)
  state.tableData = data
  state.total = total
  params.page = current_page
  state.loading = false
}

const selectionChangeIds = row => state.selectedIds = row
const changePage = (page) => getList(page)
const dialog = id => refshop.value.open(id)
const deleted = row => crud.delete(AdminShopDel, row, state.selectedIds, getList)
// 审核门店
const verify = (id, status) => crud.update(AdminShopPostOnlyStatus, { id, status }, getList)

</script>

<style scoped>
.order-container {
  min-height: 100%;
}

</style>
